Settings untill 2021-01-07
/icons/hr.icon
https://img.icons8.com/material-outlined/384/000000/settings.png
2020-10-14 11:42:21 @import構文を使わないようにした
読み込みが遅いtakker.icon
code:style.css
font-family: helvetica, arial, "Noto Sans JP", sans-serif ;
}
何故か先頭で宣言しないと読み込んでくれない
2020-09-30 01:56:10 @importは先頭にまとめないと読み込んでもらえない？ 2020-10-21 09:57:38 余白に行番号を表示するようにしたので、@media screen and (min-width: 768px) {を消した
選択範囲がずれるのを直した
↑のUserCSSと行番号表示を併用すると、選択範囲が１行以上ずれる
code:style.css
position: relative;
top: -0.5em;
}
.line span.code-block .pad:not(.code-block-margin){
background-color: rgba(0,0,0,0.05);
height: 1.7em;
position: relative;
top: 8px;
}
.line span.code-block .code-block-margin {
}
コード記法の行番号を表示
code:style.css
@media screen {
.section-title, .code-block-start { counter-reset: codeline }
.code-block .pad:not(.code-block-margin) { counter-increment: codeline }
.code-block .pad:not(.code-block-margin)::before {
content: counter(codeline);
position: relative;
display: inline-block;
left: 1px;
z-index: 10;
min-width: 50px;
text-align: left;
vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: Cica,Consolas,Roboto,Helvetica,Arial,"Hiragino Sans",sans-serif;
font-size: 11px;
}
/* カーソル行の行番号を濃く表示する */
.code-block .pad:not(.code-block-margin)::before { opacity: .5 }
.cursor-line .code-block .pad:not(.code-block-margin)::before { opacity: 1; font-weight: bolder }
}
code:style.css
--navbar-bg: rgba(41, 169, 114, 0.7);
}
--navbar-bg: rgba(64, 69, 81, 0.7);
}
.navbar {
position: sticky;
top: 0px;
z-index: 51010;
}
.expandable-menu {
z-index: 51011;
}
.page-menu {
top: 70px;
}
.global-menu.dropdown-menu {
overflow-y: scroll;
max-height: calc(100vh - 58px);
}
.modal {
z-index: 501013;
}
.modal-backdrop {
z-index: 501012;
}
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
mobileだとうまく動かないのをなんとかしたい
code:style.css
@media screen and (min-width: 768px) {
.quick-launch .project-home {
position: fixed; top: 12px; left: calc((100% - 1080px)/2); z-index: 501014;}
/*.page { padding-top: 0 }*/
.quick-launch .title {font-size: 22px;}}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home { left: 65px;}
.quick-launch .title {font-size: 22px;}}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home { left: 80px }
.quick-launch .title {font-size: 22px;}}
@media screen and (min-width: 1261px) {
.quick-launch .project-home { left: calc((100% - 1260px)/2 + 100px) }
.quick-launch .title {font-size: 22px;}}
code:style.css
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; } code:style.css
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'FontAwesome';
font-size: 20px;
}
code:style.css
.time-range .lines {
user-select: unset;
-webkit-user-select: unset;
}
code:style.css
}
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe;} .line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent } /* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #808b8c; width: 2px } /* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #52ba68; width: 5px } code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image) > a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
中身がたくさん見えるようにしたい
code:style.css
li.page-list-item.grid-style-item div.title {
-webkit-line-clamp: 2;
}
2020/8/30 03:04 やめました
常に更新を追うような姿勢になってしまってなんかやだ
code:style.css_disabled
.navbar .navbar-menu>li.stream-btn { display: block; }
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);
}
code:style.css
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic
}
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'FontAwesome'; content: '\f10d'; vertical-align: super }
等幅 フォント
code:style.css
.deco-\# {
font-family: Cica,Menlo,Monaco,Consolas,"Courier New",monospace;
}
使い方：
一行に敷き詰め: [| [画像URL][画像URL][画像URL]…]
横幅いっぱい1列並べ: [*| [画像URL][画像URL][画像URL]…]
3列並べ : [***| [画像URL][画像URL][画像URL]…]
5列並べ: [*****| [画像URL][画像URL][画像URL]…]
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } 中央寄せは記法が衝突するのでなくした
defaultで左寄せされるので左寄せ記法はいらない
俺が右寄せだ！
code:style.css
/* 中央寄せ */
/*.deco-\| { position: absolute; width: 100%; text-align: center } */
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
/*.deco-\< { position: absolute; width: 100%; text-align: left }*/
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
}
code:style.css
.line .indent-mark .dot {
opacity: 0.0;
}
.line .indent-mark .c-0 + .dot {
opacity: 1.0;
}
.line .indent-mark .c-1 + .dot {
opacity: 0.8;
}
.line .indent-mark .c-2 + .dot {
opacity: 0.6;
}
.line .indent-mark .c-3 + .dot {
opacity: 0.4;
}
.line .indent-mark .c-4 + .dot {
opacity: 0.2;
}
code:style.css
.line.number-list .dot::before {
display: block;
position: absolute;
font-family: FontAwesome;
}
.line.number-list .dot {
background-color: transparent;
display: list-item;
}
.line.number-list .dot::before {
top: -11px;
content: '\f292'; /* # */
font-size: 11px;
opacity: 0.0;
}
.line.number-list .c-0 + .dot::before {
opacity: 1.0;
}
.line.number-list .c-1 + .dot::before {
opacity: 0.8;
}
.line.number-list .c-2 + .dot::before {
opacity: 0.6;
}
.line.number-list .c-3 + .dot::before {
opacity: 0.4;
}
.line.number-list .c-4 + .dot::before {
opacity: 0.2;
}
code:style.css
.line .katex .mord.text { display: inline; }
code:style.css
.grid li.page-list-item a .description .formula { display: inline; }